<template>
    <div class="continer spaceDetail">
        <!-- 入住企业详情页面 -->
        <div class="jiben">
            <div class="title">详情:</div>
            <el-form
                :model="spaceList"
                label-width="160px"
                ref="formRef"
                autocomplete="off"
                class="addCompanyForm"
            >
                <table>
                    <tr>
                        <td>
                            <el-form-item label="工位/房间/会议室编号 : " prop="code">
                                <el-input :disabled="compDisabled" v-model="spaceList.code" style="width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="工位/房间/会议室id : " prop="id">
                                <el-input :disabled="compDisabled" v-model="spaceList.id" style="width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="空间id : " prop="space_id">
                                <el-input :disabled="compDisabled" v-model="spaceList.space_id" style="width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="空间名称 : " prop="space.name">
                                <el-input :disabled="compDisabled" v-model="spaceList.space.name" style="width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="类型名称 : " prop="type">
                                <el-input :disabled="compDisabled" v-model="spaceList.type" style="width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="可容纳人数 : " prop="people_num">
                                <el-input :disabled="compDisabled" v-model="spaceList.people_num" style="width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="面积 : " prop="area">
                                <el-input :disabled="compDisabled" v-model="spaceList.area" style="width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="状态 : " prop="status">
                                <el-input :disabled="compDisabled" v-model="spaceList.status" style="width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="启用时间 : " prop="starttime">
                                <el-input :disabled="compDisabled" v-model="spaceList.starttime" style="width: 280px;"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <el-form-item label="备注 : " prop="note">
                                <el-input type="textarea" :disabled="compDisabled" v-model="spaceList.note"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                </table>
            </el-form>
            <div class="closeDetail">
                <el-button type="primary" @click="closeDetail">返 回</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "companyDetail",
        data() {
            return {
                spaceList: {},
                compDisabled: true
            };
        },
        methods: {
            // 关闭按钮
            closeDetail(){
                window.history.back(-1); // 返回上一页
                localStorage.removeItem("spaceList");
            },
        },
        created() {
            this.spaceList = JSON.parse(window.localStorage.getItem("spaceList"));
        }
    };
</script>

<style>
.spaceDetail{
    color: #000000;
}
.closeDetail{
    float: right;
    margin-right: 150px;
    margin-top: 30px;
}
.title{
    margin-bottom: 20px;
    font-size: 20px;
}
.jiben{
    margin-bottom: 20px;
}
.jiben table{
    margin: 0 auto;
}
.jiben table td{
    height: 50px;
    text-align: center;
}
.jiben table td:nth-child(1), .jiben table td:nth-child(3){
    width: 200px;
}
.jiben table td:nth-child(2), .jiben table td:nth-child(4){
    padding: 0 50px;
}
.el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner{
    color: #606266;
}
</style>
